<template>
<div id="root">
  <h3>a的值是:{{numbers.a}}</h3>
  <button @click="numbers.a++">点我让a+1</button>
  <h3>b的值是:{{numbers.b}}</h3>
  <button @click="numbers.b++">点我让b+1</button>
</div>
</template>

<script>
export default {
  name: "ShenDuJianShi",
  data() {
    return {
      isHot: true,
      numbers: {
        a:1,
        b:1,
      }
    }
  },
  watch: {
    //监视多级结构中所有属性的变化
    numbers: {
      deep: true,
      handler() {
        console.log('numbers改变了')
      }
    },
    'numbers.a' : {
      handler() {
        console.log('a被改变了')
      }
    }
  }
}
</script>

<style scoped>

</style>
